import CardTitle from '@/components/CardTitle';
import { homeRank } from '@/services/api/api-home';
import { Pie } from '@ant-design/charts';
import ProCard from '@ant-design/pro-card';
import { DatePicker } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';

const RankModule: React.FC = ({}) => {
  /**
   * 市级部门
   */
  const [data, setDataState] = useState<any[]>([]);

  const monthFormat = 'YYYY-MM';

  const startOfYear = moment().startOf('year');
  const endOffYear = moment().endOf('year');

  useEffect(() => {
    loadData([moment(startOfYear).format('YYYY-MM'), moment(endOffYear).format('YYYY-MM')]);
  }, []);

  /**
   * 排行榜
   */
  const loadData = async (createdTimes: any) => {
    try {
      const response = await homeRank({ createdTimes });
      if (response.code === 0) {
        setDataState(response.data);
      }
    } catch (error) {}
  };

  return (
    <>
      <ProCard
        // gutter={[16, 16]}
        title={<CardTitle>排行榜</CardTitle>}
        gutter={[0, 16]}
        direction="column"
        style={{marginTop:'8px'}}
        bordered
        extra={
          <DatePicker.RangePicker
            picker="month"
            style={{
              width: '200px',
            }}
            allowClear={false}
            defaultValue={[startOfYear, endOffYear]}
            format={monthFormat}
            onChange={(date, dateString) => {
              loadData(date);
            }}
          />
        }
        bodyStyle={{
          margin: 0,
        }}
      >
        {data &&
          data.map((item) => (
            <ProCard
              title={item.title}
              size="small"
              // colSpan={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24 }}
              // style={{ backgroundImage: 'linear-gradient(  #ffffff,#f9fafc)' }}
            >
              <Pie
                style={{
                  height: '190px',
                }}
                {...{
                  appendPadding: 10,
                  data: item.data,
                  angleField: 'count',
                  colorField: 'org',
                  radius: 1,
                  innerRadius: 0.64,
                  label: {
                    type: 'inner',
                    offset: '-50%',
                    style: {
                      textAlign: 'center',
                    },
                    autoRotate: false,
                    content: '{value}',
                  },
                  statistic: {
                    title: false,
                    content: {
                      style: {
                        whiteSpace: 'pre-wrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      },
                      content: '',
                    },
                  },
                }}
              />
            </ProCard>
          ))}
      </ProCard>
      <br />
    </>
  );
};

export default RankModule;
